<template>
	<div v-loading="loading">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="任务信息" name="taskContent"></el-tab-pane>
			<el-tab-pane label="审批列表" name="subTaskContent"></el-tab-pane>
			<el-tab-pane label="归档记录" name="archivalRecord"></el-tab-pane>
		</el-tabs>
		<!-- 任务内容 -->
		<div v-if="activeName == 'taskContent'" class="btn tr w-100">
			<el-button type="primary" @click="exportTable">导出</el-button>
		</div>
		<TaskInfo v-if="activeName == 'taskContent'" :nowRowData="nowRowData"></TaskInfo>
		<div v-if="taskStatus == 'CREATED' && activeName == 'taskContent'" class="publish_btn">
			<el-button type="primary" @click="toPublish">确认 并发布</el-button>
		</div>
		<!-- 下发后随时结束 -->
		<div v-if="taskStatus != 'CREATED' && taskStatus != 'ENDED' && activeName == 'taskContent'" class="publish_btn">
			<el-button type="danger" @click="finshTask">结束任务</el-button>
		</div>
		<!-- 子任务信息 -->
		<SubTaskInfo v-if="activeName == 'subTaskContent'" :dataId="nowRowData.id" :nowRowData="nowRowData" @refresh="refresh"></SubTaskInfo>
		<!-- 归档记录 -->
		<ArchivalRecord v-if="activeName == 'archivalRecord'" :dataId="nowRowData.id" :nowRowData="nowRowData">归档记录</ArchivalRecord>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import PreviewTable from '../../previewTable/index.vue'
import SubTaskInfo from '../subTaskInfo/index.vue'
import ArchivalRecord from '../archivalRecord/index.vue'
import TaskInfo from './taskInfo.vue'
import apiMod from '@/apiMod/index'

import { getStore } from '@/utils/store'
import FileSaver from 'file-saver'
import useMqtt from '@/hooks/useMqttHooks'
import { onDownloadFile, DowloadPreviewImage } from '@/utils/util'
const { startMqtt } = useMqtt()

let props = defineProps({
	nowRowData: {
		type: Object,
		default: () => ({}),
	},
})
let taskStatus = ref(props.nowRowData.taskStatus)
let emits = defineEmits(['currentTab', 'refresh'])
let tableData = ref({ head: {}, data: [] })

let activeName = ref('taskContent')
const handleClick = (a) => {
	emits('currentTab', a.paneName)
	// 刷新一下详情
	emits('refresh')
}
let loading = ref(false)
const toPublish = () => {
	loading.value = true
	// 提交
	let params = {
		...props.nowRowData,
		publishStatus: 'PUBLISHED',
		publishStatusLabel: '已发布',
		taskStatus: 'UNFILLED',
		taskStatusLabel: '未填报',
	}
	apiMod
		.view_zwglTaskInfo_add(params)
		.then((res) => {
			ElMessage.success('提交成功')
			taskStatus.value = 'PUBLISHED'
			loading.value = false
			// 刷新主任务详情
			emits('refresh')
		})
		.catch((err) => {
			loading.value = false
		})
}
const refresh = () => {
	// 刷新主任务详情
	emits('refresh')
}
// 导出表格
const exportTable = () => {
	apiMod.view_zwglTaskInfo_export({ id: props.nowRowData.id }).then((res) => {
		if (res.code == 0) {
			ElMessage.success({
				message: '导出成功',
				type: 'success',
			})
		}
	})
}
//结束任务
const finshTask = () => {
	//提示是否要结束
	ElMessageBox.confirm('是否要结束任务？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			// 确认结束
			loading.value = true
			apiMod
				.view_zwglMainTaskInfo_finish({id: props.nowRowData.id, taskId: props.nowRowData.taskId })
				.then((res) => {
					ElMessage.success('结束成功')
					loading.value = false
					taskStatus.value = 'ENDED'
					// 刷新主任务详情
					emits('refresh')
				})
				.catch((err) => {
					loading.value = false
				})
		})
		.catch(() => {
			// 取消结束
		})
}

watch(
	() => props.nowRowData.metadataJson,
	(val) => {
		if (val) {
			tableData.value = val
		}
	},
	{
		immediate: true,
	}
)
</script>
<style scoped lang="scss">
.publish_btn {
	margin-top: 10px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
</style>
